/**
 * AI Agent架构演示页面
 * 展示基于Mastra的新架构与传统架构的对比
 */

import React, { useState } from 'react';
import { GameAgentDemo } from '../components/agent-ui/GameAgentDemo';

export const AgentDemo: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'demo' | 'comparison' | 'architecture'>('demo');

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <nav className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <h1 className="text-xl font-semibold text-gray-900">
                🤖 AI Agent架构演示
              </h1>
            </div>
            <div className="flex items-center space-x-4">
              <a
                href="/"
                className="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium"
              >
                返回主页
              </a>
            </div>
          </div>
        </div>
      </nav>

      {/* 标签页导航 */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex space-x-8">
            <button
              onClick={() => setActiveTab('demo')}
              className={`py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'demo'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              🎮 实时演示
            </button>
            <button
              onClick={() => setActiveTab('comparison')}
              className={`py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'comparison'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              📊 架构对比
            </button>
            <button
              onClick={() => setActiveTab('architecture')}
              className={`py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === 'architecture'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              🏗️ 技术架构
            </button>
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {activeTab === 'demo' && <GameAgentDemo />}
        
        {activeTab === 'comparison' && (
          <div className="space-y-8">
            <div className="text-center">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                🔄 架构对比分析
              </h2>
              <p className="text-lg text-gray-600">
                从传统REST API到智能AI Agent的演进
              </p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* 传统架构 */}
              <div className="bg-red-50 border border-red-200 rounded-lg p-6">
                <h3 className="text-xl font-semibold text-red-800 mb-4">
                  🔴 传统架构 (REST API)
                </h3>
                <div className="space-y-4">
                  <div className="bg-white rounded p-4 border border-red-200">
                    <h4 className="font-medium text-red-700 mb-2">API端点</h4>
                    <div className="text-sm text-gray-600 space-y-1">
                      <div>POST /api/game/start</div>
                      <div>POST /api/game/chat</div>
                      <div>POST /api/game/submit</div>
                      <div>GET /api/game/status/:id</div>
                    </div>
                  </div>
                  
                  <div className="space-y-2 text-sm">
                    <div className="flex items-start space-x-2">
                      <span className="text-red-500">❌</span>
                      <span>需要维护多个固定端点</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <span className="text-red-500">❌</span>
                      <span>手动参数验证和错误处理</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <span className="text-red-500">❌</span>
                      <span>固定的接口结构，难以扩展</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <span className="text-red-500">❌</span>
                      <span>重复的业务逻辑代码</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* 新架构 */}
              <div className="bg-green-50 border border-green-200 rounded-lg p-6">
                <h3 className="text-xl font-semibold text-green-800 mb-4">
                  🟢 新架构 (AI Agent)
                </h3>
                <div className="space-y-4">
                  <div className="bg-white rounded p-4 border border-green-200">
                    <h4 className="font-medium text-green-700 mb-2">统一接口</h4>
                    <div className="text-sm text-gray-600">
                      <div>POST /api/agents/gameMasterAgent</div>
                      <div className="text-xs text-gray-500 mt-1">
                        自然语言指令 → 智能解析 → 执行操作
                      </div>
                    </div>
                  </div>
                  
                  <div className="space-y-2 text-sm">
                    <div className="flex items-start space-x-2">
                      <span className="text-green-500">✅</span>
                      <span>统一的Agent接口</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <span className="text-green-500">✅</span>
                      <span>自然语言交互</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <span className="text-green-500">✅</span>
                      <span>智能参数解析和验证</span>
                    </div>
                    <div className="flex items-start space-x-2">
                      <span className="text-green-500">✅</span>
                      <span>自动错误处理和降级</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* 代码对比 */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-4">💻 代码对比</h3>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-medium text-red-700 mb-2">传统方式</h4>
                  <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto">
{`// 多个API调用
const startResponse = await fetch('/api/game/start', {
  method: 'POST',
  body: JSON.stringify(config)
});

const chatResponse = await fetch('/api/game/chat', {
  method: 'POST', 
  body: JSON.stringify(chatData)
});

// 手动错误处理
if (!startResponse.ok) {
  throw new Error('游戏开始失败');
}`}
                  </pre>
                </div>
                
                <div>
                  <h4 className="font-medium text-green-700 mb-2">Agent方式</h4>
                  <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto">
{`// 统一的Agent调用
const response = await client.agent.run({
  agentId: 'gameMasterAgent',
  messages: [{
    role: 'user',
    content: '开始一个困难难度的推理游戏'
  }]
});

// 自动错误处理和降级
// Agent自动解析意图并执行相应操作`}
                  </pre>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'architecture' && (
          <div className="space-y-8">
            <div className="text-center">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                🏗️ 技术架构详解
              </h2>
              <p className="text-lg text-gray-600">
                基于Mastra框架的AI Agent系统设计
              </p>
            </div>

            {/* Agent架构图 */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-4">🤖 Agent架构组成</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <h4 className="font-semibold text-blue-800 mb-2">游戏主控Agent</h4>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 统一游戏流程控制</li>
                    <li>• 协调其他Agent</li>
                    <li>• 游戏状态管理</li>
                    <li>• 错误处理与恢复</li>
                  </ul>
                </div>
                
                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                  <h4 className="font-semibold text-green-800 mb-2">案件生成Agent</h4>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 智能案件生成</li>
                    <li>• 嫌疑人角色创建</li>
                    <li>• 线索系统设计</li>
                    <li>• 逻辑一致性保证</li>
                  </ul>
                </div>
                
                <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
                  <h4 className="font-semibold text-purple-800 mb-2">对话Agent</h4>
                  <ul className="text-sm text-gray-600 space-y-1">
                    <li>• 角色扮演对话</li>
                    <li>• 情绪状态管理</li>
                    <li>• 线索逐步透露</li>
                    <li>• 行为一致性维护</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* 技术栈 */}
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-4">⚡ 技术栈</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h4 className="font-medium text-gray-800 mb-3">后端技术</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-blue-500 rounded-full"></span>
                      <span>Mastra AI Framework</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                      <span>TypeScript + Node.js</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-purple-500 rounded-full"></span>
                      <span>DeepSeek AI Model</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-yellow-500 rounded-full"></span>
                      <span>LibSQL Database</span>
                    </div>
                  </div>
                </div>
                
                <div>
                  <h4 className="font-medium text-gray-800 mb-3">前端技术</h4>
                  <div className="space-y-2 text-sm">
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-cyan-500 rounded-full"></span>
                      <span>React + TypeScript</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-indigo-500 rounded-full"></span>
                      <span>Mastra Client SDK</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-pink-500 rounded-full"></span>
                      <span>Custom React Hooks</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="w-2 h-2 bg-orange-500 rounded-full"></span>
                      <span>Tailwind CSS</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* 优势总结 */}
            <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-6">
              <h3 className="text-xl font-semibold mb-4">🚀 架构优势</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-3">
                  <div className="flex items-start space-x-3">
                    <span className="text-green-500 text-lg">✨</span>
                    <div>
                      <h4 className="font-medium">更简洁的代码</h4>
                      <p className="text-sm text-gray-600">从多个API端点简化为单一Agent接口</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <span className="text-green-500 text-lg">🧠</span>
                    <div>
                      <h4 className="font-medium">智能交互</h4>
                      <p className="text-sm text-gray-600">支持自然语言指令，无需严格的参数格式</p>
                    </div>
                  </div>
                </div>
                <div className="space-y-3">
                  <div className="flex items-start space-x-3">
                    <span className="text-green-500 text-lg">🔧</span>
                    <div>
                      <h4 className="font-medium">易于扩展</h4>
                      <p className="text-sm text-gray-600">新功能只需更新Agent指令，无需修改API路由</p>
                    </div>
                  </div>
                  <div className="flex items-start space-x-3">
                    <span className="text-green-500 text-lg">🛡️</span>
                    <div>
                      <h4 className="font-medium">自动处理</h4>
                      <p className="text-sm text-gray-600">Agent自动处理参数验证、错误恢复和降级方案</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
